<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>购物车</title>
    <style>
      table {
        border: 1px solid #e9e9e9;
        border-collapse: collapse;
        border-spacing: 0;
      }

      th,
      td {
        padding: 8px 16px;
        border: 1px solid #f3ebeb;
        text-align: left;
        color: #fff;
        opacity: .9;
      }

      th {
        background-color: #eaea0e;
        color: #131314;
        font-weight: 600;
      }
      tbody {
        background-color: green;
      }
    </style>
    <script src="../vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div v-if="goods.length">
        <table>
          <thead>
            <tr>
              <th>商品名称</th>
              <th>价格</th>
              <th>购买数量</th>
              <th>操作</th>
            </tr>
          </thead>

          <tbody>
            <tr v-for="(item, index) in goods ">
              <td>{{item.name}}</td>
              <td>{{item.price}}</td>

              <td>
                <button @click=" increment(index)" :disabled="item.num===-1">-</button>
                {{item.num}}
                <button @click="decrement(index)" :disabled="item.num===10">+</button>
              </td>
              <td>
                <button @click="del(index)">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
        <!-- <h3><span> 总价格:{{totalPrice.toFixed(2)}}</span> <span>总数量:{{totalSum}}</span></h3> -->
        <h3><span> 总价格:{{totalPrice.toFixed(2)}}</span> <span>总数量:{{totalSum}}</span></h3>
      </div>
      <h3 v-else>购物车为空</h3>
    </div>
    <script>
      /* 
      1.单个商品购买数量最少为0，最多无限制
      2.总价格和总数量要根据单个商品购买数量动态改变
      3.样式写好看点
      */
      const app = new Vue({
        el: "#app",
        data: {
          goods: [
            {
              id: 1,
              name: "iphonex",
              price: 999.88,
              num: 0,
            },
            {
              id: 2,
              name: "iphone6",
              price: 8999.75,
              num: 1,
            },
            {
              id: 3,
              name: "小米10",
              price: 1323.15,
              num: 1,
            },
            {
              id: 4,
              name: "iphone 14",
              price: 1288.87,
              num: 1,
            },
          ],

         // num:"item.num",
        totalSum:0,
        totalPrice:0,
        },

      
        //计算属性
        // computed:{ 
        //   totalPrice(){
        //    return  this.goods.reduce((prev,item,index) => { 
        //          prev += item.num* item.price
        //          return prev
        //      },0)
           
             
        //   },
        //   totalSum(){
        //     return  this.goods.reduce((prev,item,index) => { 
        //          prev += item.num
        //          return prev
        //      },0)
        //   },
        // },


        //watch 监测
       
       //监视属性
        watch:{ 
           //我要监视item
           goods:{ 
            immediate:true,
            deep:true,
            handler(val){
              console.log(val);

              //清空并赋值上一次的数量和价格
              this.totalSum = 0;
              this.totalPrice = 0;
              
              val.forEach((item) => {
                this.totalSum += item.num;
                this.totalPrice += item.num * item.price;
              });
            }
           }
        },



        methods: {
          //减少
          increment(index) {
            if(this.goods[index].num <=0){
              alert("数量不能小于0")
            }else{
              this.goods[index].num--;
            }
           
          },
          //增加
          decrement(index) {
            this.goods[index].num++;
            // console.log( this.goods[index]);
          },
          //删除
          del(index) {
            this.goods.splice(index,1)
          },
        },


      });
    </script>
  </body>
</html>
